<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>编辑公告</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="../../css/font.css">
  <link rel="stylesheet" href="../../css/xadmin.css">
  <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  <script src="../../lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../js/xadmin.js"></script>
  <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <!--导航栏开始-->
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a>
        <cite>导航元素</cite>
      </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
  </div>
  <!--导航栏结束-->
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!--搜索条件结束-->
          <!--数据表格开始-->
          <div class="layui-card-body">
            <!-- <div style="width: 30%;"> -->
            <table class="layui-hide" id="notice" lay-filter="notice"></table>
            <!-- </div> -->
            <div style="display: none;" id="noticeBar">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
            </div>
            <div style="display: none;" id="noticeToolBar">
              <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
                <!--                                <button type="button" class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</button>-->
                <button type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新表格</button>
              </div>
            </div>
          </div>
          <!--数据表格结束-->
        </div>
      </div>
    </div>
  </div>


</body>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js" type="text/javascript" charset="utf-8"></script>

<script>
  layui.use(['jquery', 'layer', 'table', 'form'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var table = layui.table;
    var form = layui.form;
    var user = app.getUserGlobalInfo();


    var tableIns = table.render({
      elem: '#notice' //渲染的目标对象
        ,
      url: app.ServerUrl + 'v1/feedback/selectNoticeByLauncherRoleId' //数据接口
        ,
      where: {
        launcherRoleId: user.roleId
      },
      method: 'get',
      title: 'notice' //数据导出标题
        ,
      toolbar: "#noticeToolBar" //表头的工具条
        ,
      defaultToolbar: ['filter', 'print'],
      cellMinWidth: 100 //设置列的最小默认宽度
        ,
      done: function (res, curr, count) {

      },
      totalRow: true //开启合并行
        ,
      page: true //是否开启分页
        ,
      limit: 10 //设置每页显示的条数
        ,
      limits: [3, 5, 10],
      loading: true //是否显示加载条
        ,
      text: {
        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
      },
      parseData: function (res) { //res 即为原始返回的数据
        var result;
        if (this.page.curr) {
          result = res.objs[0].slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        } else {
          result = res.objs[0].slice(0, this.limit);
        }
        return {
          "resultStatus": res.resultStatus, //解析状态码
          "resultIns": res.resultIns, //解析数据状态信息
          "count": res.objs[0].length, //解析数据长度
          "data": result //解析数据列表
        };
      },
      response: {
        statusName: 'resultStatus',
        statusCode: 1,
        msgName: 'resultIns',
      },
      cols: [
        [ //列数据
          {
            type: 'checkbox',
            fixed: 'left'
          }, {
            type: 'numbers',
            title: '序号'
          }
          // ,{field: 'launcher', title: '用户Id',  align:'center'}
          , {
            field: 'username',
            title: '用户名',
            align: 'center'
          }, {
            field: 'state',
            title: '公告等级',
            align: 'center'
          }, {
            field: 'launchTime',
            title: '时间',
            sort: true,
            align: 'center',
            templet: function (d) {
              return app.getFormatDate(d.launchTime);
            }
          }, {
            field: 'noticeContext',
            title: '内容',
            align: 'center'
          }, {
            field: 'right',
            title: '操作',
            toolbar: '#noticeBar',
            align: 'center',
            fixed: 'right'
          }
        ]
      ]
    });

    //监听头部工具栏事件
    table.on('toolbar(notice)', function (obj) {
      switch (obj.event) {
        case 'add':
          layer.prompt({
            formType: 2,
            value: '请输入公告内容',
            title: '新增公告',
            area: ['800px', '350px'] //自定义文本域宽高
          }, function (value, index) {
            $.ajax({
              url: app.ServerUrl + 'v1/feedback/addNotice',
              type: "post",
              data: {
                launcher: user.userId,
                noticeContext: value
              },
              async: false, //true 异步请求（默认）；false 同步请求
              dataType: "json",
              // headers: {
              //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
              // },
              success: function (res) {
                // console.log("成功");
                //请求成功之后的操作，res是成功后的数据
                if (res.resultStatus == 1) {
                  layer.alert("新增成功", {
                    icon: 6
                  });
                } else {
                  layer.alert("新增失败", {
                    icon: 5
                  });
                }
              },
            });
            layer.close(index);
          });
          break;
        case 'reloadTable': //异步刷新表格
          tableIns.reload({
            url: app.ServerUrl + 'v1/feedback/selectNoticeByLauncherRoleId'
          });
          break;
      }
    });

    //监听行双击事件
    table.on('rowDouble(notice)', function (obj) {
      layer.open({
        type: 1,
        title: false //不显示标题栏
          ,
        closeBtn: false,
        area: '400px;',
        shade: 0.8,
        id: 'LAY_layuipro' //设定一个id，防止重复弹出
          ,
        btn: ['确定'],
        btnAlign: 'c',
        moveType: 1 //拖拽模式，0或者1
          ,
        content: '\<\div style="padding: 50px; line-height: 22px;' +
          ' background-color: #393D49; color: #fff; font-weight: 300;' +
          'display:block;word-break: break-all;word-wrap: break-word;">' + obj.data.noticeContext +
          '\<\/div>',
        success: function () {
          layer.close();
        }
      })
    });
    //监听行工具事件
    table.on('tool(notice)', function (obj) { //注：tool 是工具条事件名，notice 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if (layEvent === 'del') { //删除
        layer.confirm('真的删除公告么', function () {
          $.ajax({
            url: app.ServerUrl + 'v1/feedback/deleteNoticeById',
            type: "post",
            data: {
              noticeId: obj.data.noticeId,
            },
            async: false, //true 异步请求（默认）；false 同步请求
            dataType: "json",
            // headers: {
            //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
            // },
            success: function (res) {
              //请求成功之后的操作，res是成功后的数据
              if (res.resultStatus == 1) {
                layer.msg('已删除!', {
                  icon: 1,
                  time: 1000
                });
              } else {
                alert("删除失败！！！");
              }
            },
            error: function (res) {
              //请求失败之后的操作，res是失败后的数据
              console.log(res)
            },
          });
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          //向服务端发送删除指令
        });
      } else if (layEvent === 'edit') { //编辑
        layer.prompt({
          formType: 2,
          value: obj.data.noticeContext,
          title: '请输入值',
          area: ['800px', '350px'] //自定义文本域宽高
        }, function (value, index) {
          $.ajax({
            url: app.ServerUrl + 'v1/feedback/updateNoticeById',
            type: "post",
            data: {
              noticeId: obj.data.noticeId,
              noticeContext: value
            },
            async: false, //true 异步请求（默认）；false 同步请求
            dataType: "json",
            // headers: {
            //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
            // },
            success: function (res) {
              //请求成功之后的操作，res是成功后的数据
              if (res.resultStatus == 1) {
                layer.alert("修改成功", {
                  icon: 6
                });
                tableIns.reload();
              } else {
                layer.alert("修改失败", {
                  icon: 5
                });
              }
            },
          });
          layer.close(index);
        });
      }
    });
  });
</script>

</html>